window.addEventListener('load', function () {
    //1.获取元素
    var focus = document.querySelector('.focus');
    var ul = document.querySelector('ul');
    var ol = focus.querySelector('ol');
    //获得图片宽度
    var focusWidth = focus.offsetWidth;
    //给ol的小li绑定事件
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = 'unchange'
        //给ol的小li添加一个索引号
        ol.children[i].setAttribute('index-data', i);
        //绑定触摸事件
        ol.children[i].addEventListener('mouseenter', function () {
            //触摸小li发生变化
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = 'unchange'
            }
            this.className = 'change';
            //获得索引号
            var index = this.getAttribute('index-data');
            num = circle = index;
            //引入animate动画
            animate(ul, - index * focusWidth);
        })
    }
    //默认第一张图片是选中状态
    ol.children[0].className = 'change';
    //设置定时器
    var num = 0;
    var circle = 0;
    var timer = setInterval(bofang, 3000);
    //鼠标经过定时器停止
    focus.addEventListener('mouseenter', function () {
        clearInterval(timer);
    })
    //鼠标离开定时器启动
    focus.addEventListener('mouseleave', function () {
        timer = setInterval(bofang, 3000);
    });
    // 封装定时器函数
    function bofang() {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);

        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = 'unchange';
        }
        ol.children[circle].className = 'change';
    }


})